<template>
	<view class="page">
		<view class="tcard">
			<view class="title">
				请选择问题分类
			</view>
			<view class="options flexR">
				<view v-for="(item, idx) in types" class="option" :key="item.id" :class="{active: actType == idx}"
					@click="actType = idx">{{item.name}}</view>
			</view>
		</view>

		<view class="tcard">
			<view class="title">
				请选择问题
			</view>
			<view class="options flexR">
				<view v-for="(item, idx) in questions" :key="item.id" class="option" :class="{active: actQue == idx}"
					@click="actQue = idx">{{item.name}}</view>
			</view>

			<textarea class="advice" v-model="advice" placeholder="请填写反馈意见" :maxlength="200">
      </textarea>
		</view>
		<ButtonVue content="提交" @click="comfirn"></ButtonVue>
		<DialogVue :show="show" @confirm="toPage" @close="show=false">
			<view class="text-center">反馈成功，即将跳转到反馈页面</view>
		</DialogVue>
	</view>
</template>

<script>
	import {
		feedBackAdd
	} from '../../api/feedBack';
	import ButtonVue from '../../components/Button/Button.vue';
	import DialogVue from '../../components/Dialog/Dialog.vue';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			ButtonVue,
			DialogVue
		},
		computed: {
			...mapGetters(['userInfo', "hostApi"]),
		},
		data() {
			return {
				types: [{
					id: 1,
					name: '反馈'
				}, {
					id: 2,
					name: '建议'
				}, {
					id: 3,
					name: '投诉'
				}, {
					id: 4,
					name: '咨询'
				}],
				questions: [{
					id: 1,
					name: '登陆注册'
				}, {
					id: 2,
					name: '绑卡'
				}, {
					id: 3,
					name: '预约挂号'
				}, {
					id: 4,
					name: '门诊缴费'
				}, {
					id: 5,
					name: '住院'
				}, {
					id: 6,
					name: '报告查询'
				}, {
					id: 7,
					name: '其他'
				}],
				actType: 0,
				actQue: 0,
				advice: '',
				form: {},
				show: false,
			}
		},
		methods: {
			comfirn() {
				if (!this.advice) {
					this.$u.toast('请输入反馈内容')
					return
				}
				this.form = {
					patId: this.userInfo.patId,
					patName: this.userInfo.patName,
					typeId: this.types[this.actType].id,
					typeName: this.types[this.actType].name,
					questionId: this.questions[this.actQue].id,
					questionName: this.questions[this.actQue].name,
					feedBack: this.advice,
					status: 1
				}
				feedBackAdd(this.form).then(res => {
					// this.$u.toast('反馈成功可在个人中心查看')
					this.show = true;

				})
			},
			toPage() {
				uni.navigateTo({
					url: '/pages/User/FeedBack'
				})
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tcard {
		padding: 24upx;
	}

	.options {
		// justify-content: space-between;
		justify-content: flex-start;
		align-items: center;
		gap: 32upx;
		flex-wrap: wrap;
	}

	.option {
		width: calc(25% - 28upx);
		flex-shrink: 0;
		height: 48upx;
		line-height: 48upx;
		border-radius: 48upx;
		text-align: center;
		background: #F1F6FF;
		color: rgba(0, 0, 0, 0.4);

		&.active {
			color: #FFF;
			background-color: $theme-color;
		}
	}

	.advice {
		box-sizing: border-box;
		width: 100%;
		margin-top: 48upx;
		padding: 16upx 24upx;
		border-radius: 12upx;
		border: 1px solid rgba(0, 0, 0, 0.08);
	}
</style>